<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="菜单管理" width="50%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-width="80px">
        <el-form-item label="一级菜单" >
          <el-select v-model="formParams.oneId" placeholder="选择第一级菜单" clearable @change="chooseMenu">
            <el-option :label="item.title" :value="item.id" v-for="(item, index) in menuFirstDataList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级菜单" v-if="menuSecondDataList.length">
          <el-select v-model="formParams.twoId" placeholder="选择二级菜单" clearable >
            <el-option :label="item.title" :value="item.id" v-for="(item, index) in menuSecondDataList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单标题" prop="title">
          <el-input class="width40" type="text" v-model="formParams.title" placeholder="菜单显示标题"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input class="width40" type="text" v-model="formParams.name" placeholder="菜单显示名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单路由" prop="path">
          <el-input class="width40" type="text" v-model="formParams.path" placeholder="驼峰命名的英文字母"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="iocn">
          <i v-show="formParams.icon" :class="formParams.icon" style="font-size: 32px; color: #409eff"></i>
          <div class="iconBox border-box width60">
            <span class="iconNo" :class="iconIndex == index ? 'iconCheked' : ''" v-for="(item, index) in iconData" :key="index" @click.stop="chooseIcon(item, index)">
              <i :class="item"></i>
            </span>
          </div>
        </el-form-item>
        <el-form-item label="菜单序号" prop="sort">
          <el-input class="width40" type="number" v-model="formParams.sort" placeholder="序号用于同一子级排序"></el-input>
        </el-form-item>
        <el-form-item label="是否隐藏">
          <el-radio-group v-model="formParams.hidden">
            <el-radio :label="0">展示</el-radio>
            <el-radio :label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import icons from '@/utils/icon.js'
import {
  menuAdd,
  menuEdit
} from '@/api/system.js'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    menuFirstDataList: {
      type: Array,
      default: function () {
        return []
      }
    },
    menuDataList: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      isShow: false,
      formParams: {
        oneId: null,
        twoId: null,
        iocn: '',
        name: '',
        path: '',
        title: '',
        hidden: 0,
        sort: 0,
      },
      iconData: icons.iconLists,
      menuSecondDataList: [],
      iconIndex: -1,
      ruleForm: {
        name: [{ required: true, trigger: 'blur', message: '请输入菜单名称', }],
        path: [{ required: true, trigger: 'blur', message: '请输入菜单路由', }],
        title: [{ required: true, trigger: 'blur', message: '请输入菜单显示标题', }],
        // sort: [{ required: true, trigger: 'blur', message: '请输入菜单序号', }],
      }
    }
  },
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.data.oneId=null
        that.data.twoId=null
        that.formParams = JSON.parse(JSON.stringify(that.data))
        that.menuBack(that.formParams)
        that.iconData.map((item, index) => {
          if (item == that.formParams.iocn) {
            that.chooseIcon(item, index)
          }
        })
      } else {
        that.formParams = {
          oneId: null,
          twoId: null,
          iocn: '',
          path: '',
          name: '',
          title: '',
          hidden: 0,
          sort: 0,
        }
      }
    },
  },
  created () {},
  methods: {
    // 菜单回显
    menuBack(row){
      this.menuSecondDataList = []
      // 判断菜单等级
      if (row.parent_id) {
        this.menuDataList.map(item => {
          if (item.id == row.parent_id) {
            if(item.parent_id){ // 判断一级列表
              this.formParams.oneId=item.parent_id
              this.formParams.twoId=row.parent_id
              this.chooseMenu(item.parent_id)
            }else{
              this.formParams.oneId=item.id
              this.chooseMenu(item.id)
            }
          }
        })
      }else{
        this.formParams.oneId=row.id
        this.chooseMenu(row.id)
      }
    },
    // 选择菜单
    chooseMenu (id) {
      this.menuSecondDataList = []
      this.menuDataList.map(item => {
        if (item.id == id) {
          this.menuSecondDataList=item.children
        }
      })
    },
    // 选择图标
    chooseIcon (item, index) {
      this.formParams.icon = item
      this.iconIndex = index
    },
    // 确认
    handleConfirm (formName) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      that.$refs[formName].validate((valid) => {
        if (valid) {
          // 新增
          if (!params.id) {
            menuAdd({
              parent_id: params.twoId ? params.twoId : params.oneId ? params.oneId : 0,
              title: params.title,
              name: params.name,
              path: params.path,
              icon: params.icon,
              sort: parseInt(params.sort),
              hidden: params.hidden,
            }).then(function (res) {
              if(res.code==1){
                that.$message.success(res.msg)
                that.$emit('onHideDetails', true)
              }
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            menuEdit({
              id: params.id,
              parent_id: params.twoId ? params.twoId : params.oneId ? params.oneId : 0,
              title: params.title,
              name: params.name,
              path: params.path,
              icon: params.icon,
              sort: parseInt(params.sort),
              hidden: params.hidden,
            }).then(function (res) {
              if(res.code==1){
                that.$message.success(res.msg)
                that.$emit('onHideDetails', true)
              }
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.iconBox {
  height: 300px;
  overflow: auto;
  font-size: 28px;
  cursor: pointer;
  .iconNo {
    margin: 2px;
  }
  .iconCheked {
    color: #409eff;
  }
}
</style>